<template>
  <div class="about">
    我是about
      <div v-for="(item, index) in list" :key="index" :id="'div' + index">
        {{ item.name + '---' + item.age }}
        <input type="text">
      </div>
    <button @click="deleteItem">删除</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: 'a',
          age: 20
        },
        {
          name: 'b',
          age: 30
        },
        {
          name: 'c',
          age: 40
        },
        {
          name: 'd',
          age: 50
        },
        {
          name: 'f',
          age: 60
        },
      ]
    }
  },
  methods: {
    deleteItem() {
      this.list.unshift({
        name: 'zzy',
        age: 18
      })
    }
  },
  mounted() { console.log('about mounted'); },
  created() {
    console.log('about created');
  },
  beforeCreate() { console.log('about beforeCreate'); },
  beforeDestroy() { console.log('about beforeDestroy'); },
  destroyed() { console.log('about destroyed'); },
  beforeRouteEnter(to, from, next) {
    console.log('about beforeRouteEnter');
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log('about beforeRouteUpdate');
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('about beforeRouteLeave');
    next()
  },
}
</script>

<style scoped lang="less"></style>